<template>
  <div id="total"> 
	<span id="numberID" class="t_num"></span>
    <vue-canvas-nest></vue-canvas-nest>
  </div> 

  
</template>

<script>
import vueCanvasNest from 'vue-canvas-nest'
import '../../lib/animateBackground'
export default {
    data(){
        return {
            n: 100000
        }
    },
    components: {vueCanvasNest},
    methods: {
        show_num(n) {
            var numberID ='numberID'
			var it = $("#"+numberID+" i")
			var len = String(n).length
			for(var i=0;i<len;i++){ 
				if(it.length<=i){ 
					$("#numberID").append("<i id='span_li_0"+i+"' style='background-Position: 0 -342px;'></i>")
				} 
				var num=String(n).charAt(i)
				//var y; //y轴位置 0  1   -38  2
				var y = num==0?-342:-parseInt(num-1)*38
				
				$("#span_li_0"+i).animate({backgroundPosition :'0 '+String(y)+'px'},'slow','swing',function(){})
			} 
			console.log(n)
			return n
        }
    },
    created() {
        setInterval(()=>{
            this.n = this.show_num(this.n)
            this.n++
        },2000);
    }
}

</script>
<style>
.t_num_con { display: inline-table;position:relative; margin:0 0 0 0; padding:0px;}	
.t_num{ position: static; display: block; padding:0px;margin:0px;}
.t_num i {background-color:#337ab7!important;}
.t_num { font-family: "Arial", Gadget, sans-serif; color:#f60; font-size:32px; text-align: center;  float: left;left:60px; top:10px; z-index:2;}
.t_num i{width:28px;height:38px; display:inline-block; background: url('../../assets/number5.png') no-repeat #c13333; text-indent:-999em;float: left;  margin:0 2px 0 0; border-radius: 2px; color:#f60; }
</style>